import {HashRouter, Route, Routes} from "react-router-dom";
import {createStyles} from "antd-style";
import React from "react";
import {Flex, Typography} from "antd";

const useStyle = createStyles(({css}) => {
    const loadingStyle = css`
        width: 100vw;
        height: 100vh;
        display: grid;
        place-content: center;

        div {
            font-size: 30px;
        }
    `
    return {
        loadingStyle
    }
})

const loadingComponent = () => {
    const {styles} = useStyle();
    return (
        <div className={styles.loadingStyle}>
            <div>Loading...</div>
        </div>
    )
}

const MainPage = React.lazy(() => import("@/pages/MainPage"))
const ContextPage = React.lazy(() => import("@/pages/ContextPage"))
const AdminPage = React.lazy(() => import("@/pages/ContextPage/AdminPage"))
const PubContentPage = React.lazy(() => import("@/pages/ContextPage/PubContentPage"))

const AdminUserPage = React.lazy(() => import("@/pages/ContextPage/AdminPage/AdminUserPage"))
const AdminObjPage = React.lazy(() => import("@/pages/ContextPage/AdminPage/AdminObjectPage"))
const AdminPojPage = React.lazy(() => import("@/pages/ContextPage/AdminPage/AdminPojPage"));

const PojPage = React.lazy(() => import("@/pages/PojPage"));

export const AppRouter = () => {
    return (
        <HashRouter>
            <Routes>

                {/*主页*/}
                <Route path="/" element={
                    <React.Suspense fallback={loadingComponent()}>
                        <MainPage/>
                    </React.Suspense>}>
                </Route>

                {/*内容页面*/}
                <Route path="/context" element={
                    <React.Suspense fallback={loadingComponent()}>
                        <ContextPage/>
                    </React.Suspense>
                }>

                    <Route path="" element={
                        <React.Suspense fallback={loadingComponent()}>
                            <PubContentPage/>
                        </React.Suspense>
                    }/>

                    {/*管理页面*/}
                    <Route path="admin" element={
                        <React.Suspense fallback={loadingComponent()}>
                            <AdminPage/>
                        </React.Suspense>
                    }>
                        <Route path="" element={
                            <Flex align='center'
                                  justify='center'
                                  style={{width: "100%", height: "100%"}}
                            >
                                <Typography>
                                    <Typography.Title>欢迎来到 Web VR Home Tour 管理员页面</Typography.Title>
                                    <Typography.Title level={4}>请通过左侧按钮来切换需要的页面</Typography.Title>
                                </Typography>
                            </Flex>
                        }/>
                        <Route path="user" element={
                            <React.Suspense fallback={loadingComponent()}>
                                <AdminUserPage/>
                            </React.Suspense>
                        }/>
                        <Route path="obj" element={
                            <React.Suspense fallback={loadingComponent()}>
                                <AdminObjPage/>
                            </React.Suspense>
                        }/>
                        <Route path="poj" element={
                            <React.Suspense fallback={loadingComponent()}>
                                <AdminPojPage/>
                            </React.Suspense>
                        }/>
                    </Route>
                </Route>

                <Route path="/poj/:pojId" element={
                    <React.Suspense fallback={loadingComponent()}>
                        <PojPage/>
                    </React.Suspense>
                }>

                </Route>
            </Routes>
        </HashRouter>
    )
}